<style lang="less">
.business-wrap .el-tree .el-tree-node__expand-icon.el-icon-caret-right:after {
    width: 10px;
    left: -6px;
}
.custom-tree-node {
    position: relative;
    color: #bfdff7;
    .icon-play {
        position: absolute;
        left: 5px;
        top: 9px;
        font-size: 8px;
        display: none;
    }
    .icon-video {
        margin-right: 5px;
    }
    &.active {
        color: #00e7ff;
        .icon-play {
            display: inline;
            color: #00e7ff;
        }
    }
    .none {
        color: #aaa;
    }
}
</style>
<template>
    <div class="page-census page-setting">
        <div class="crumbs">
            <router-link to="/">首页</router-link> / 一企一档 / <span class="active">鹰眼e通</span>
        </div>
        <el-container :style="{ height: mainH + 'px' }">
            <el-aside class="setting-nav-wrap" width="300px" style="padding: 20px">
                <div class="unit-search flex">
                    <el-input
                        class="flex-1"
                        placeholder="请输入关键字"
                        v-model.trim="keyword"
                    ></el-input>
                </div>
                <h1 class="fs-16 mt-10">企业列表</h1>
                <div
                    class="business-wrap"
                    :style="{ height: mainH - 110 + 'px', overflow: 'auto' }"
                >
                    <el-tree
                        ref="tree"
                        :props="props"
                        :load="loadNode"
                        lazy
                        @node-click="handleNodeClick"
                        :render-content="renderContent"
                        :filter-node-method="filterNode"
                    >
                    </el-tree>
                </div>
            </el-aside>
            <el-main ref="rightBlk" class="setting-main">
                <div
                    id="videoControl"
                    class="video-control"
                    :style="{
                        width: videoWidth + 'px',
                        height: videoHeight + 'px',
                        margin: '0 auto',
                    }"
                ></div>
            </el-main>
        </el-container>
    </div>
</template>
<script>
import screenVideoPlayer from "@/components/screenVideoPlayer/screen"
import { mapState } from "vuex"
export default {
    name: "Notice",
    components: {
        screenVideoPlayer,
    },
    props: {
        winH: {
            type: Number,
            default: 500,
        },
    },
    // <!-- 1 电气火灾 2 消防用水 3 烟感 4 可燃气体 5 火灾自动联网 6 消防可视化 -->
    data() {
        return {
            keyword: "",
            businessId: this.$route.query.id,
            businessName: this.$route.query.name,
            deviceList: [],
            videoWidth: 100,
            videoHeight: 100,
            currentWinId: 0,
            totalWin: 25,
            props: {
                label: "name",
                children: "cameras",
                isLeaf: "leaf",
            },

            playerOptions: null,
        }
    },
    computed: {
        ...mapState(["siteInfos"]),
        mainH() {
            return this.winH - 180
        },
    },
    watch: {
        keyword(val) {
            this.$refs.tree.filter(val)
        },
    },
    methods: {
        renderContent(h, { node, data, store }) {
            if (!data.productId) {
                if (data.type == "none") {
                    return (
                        <span class="custom-tree-node">
                            <span class="none">{data.name}</span>
                        </span>
                    )
                } else {
                    return (
                        <span class="custom-tree-node">
                            <span>{data.name}</span>
                        </span>
                    )
                }
            } else {
                if (data.isActive) {
                    return (
                        <span class="custom-tree-node active">
                            <i class="iconfont icon-video"></i>
                            <i class="iconfont icon-play"></i>
                            <span>{data.name}</span>
                        </span>
                    )
                }
                return (
                    <span class="custom-tree-node">
                        <i class="iconfont icon-video"></i>
                        <i class="iconfont icon-play"></i>
                        <span>{data.name}</span>
                    </span>
                )
            }
        },
        getData(cbk) {
            this.loading = true
            this.$get("/business/business/businessList").then(
                (res) => {
                    this.loading = false
                    cbk && cbk(res.data)
                },
                (err) => {
                    this.loading = false
                    if (err.msg) {
                        this.$message.error(err.msg)
                    }
                }
            )
        },
        getDevice(businessId, cbk) {
            this.$get("/fireFightingIOT/device/deviceCameraList", {
                businessId: businessId,
            }).then(
                (res) => {
                    let deviceList = res.data.map((item) => {
                        item.isActive = false
                        item.leaf = true
                        return item
                    })

                    cbk && cbk(deviceList)
                },
                (err) => {
                    this.loading = false
                    if (err.msg) {
                        this.$message.error(err.msg)
                    }
                }
            )
        },
        filterNode(value, data) {
            if (!value) return true
            return data.name.indexOf(value) !== -1
        },
        loadNode(node, resolve) {
            if (node.level === 0) {
                this.getData((list) => {
                    resolve(list)
                })
            } else if (node.level > 0) {
                this.getDevice(node.data.id, (list) => {
                    if (list.length == 0) {
                        resolve([{ name: "暂无设备", leaf: true, type: "none" }])
                    } else {
                        resolve(list)
                    }
                })
            }
        },
        handleNodeClick(data) {
            if (data.type == "none" || !oWebControl) return
            this.currentWinId++
            this.currentWinId = Math.min(this.currentWinId, this.totalWin)
            this.startPreview(data.number, this.currentWinId)
            data.isActive = true
        },
        startPreview(cameraIndexCode, winId) {
            var cameraIndexCode = cameraIndexCode //获取输入的监控点编号值，必填
            var streamMode = 0 //主子码流标识：0-主码流，1-子码流
            var transMode = 1 //传输协议：0-UDP，1-TCP
            var gpuMode = 0 //是否启用GPU硬解，0-不启用，1-启用
            var wndId = winId || -1 //播放窗口序号（在2x2以上布局下可指定播放窗口）

            cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, "")
            cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, "")

            oWebControl.JS_RequestInterface({
                funcName: "startPreview",
                argument: JSON.stringify({
                    cameraIndexCode: cameraIndexCode, //监控点编号
                    streamMode: streamMode, //主子码流标识
                    transMode: transMode, //传输协议
                    gpuMode: gpuMode, //是否开启GPU硬解
                    wndId: wndId, //可指定播放窗口
                }),
            })
        },
        initControl() {
            // this.initVideoWebPlugin({
            //     containerId:'videoControl',
            //     width:this.videoWidth,
            //     height:this.videoHeight,
            //     layout: '5x5'
            // },()=>{
            //     // this.startPreview(this.number)
            // })
        },
    },
    created() {
        this.getData()
    },
    activated() {},
    mounted() {
        // console.log(this.$refs.rightBlk)
        // console.log(this.$refs.rightBlk.$el.clientWidth)
        // console.log(this.$refs.rightBlk.$el.clientHeight)
        this.videoWidth = this.$refs.rightBlk.$el.clientWidth
        this.videoHeight = this.$refs.rightBlk.$el.clientHeight - 30
        this.initControl()
    },
    destroyed() {
        if (oWebControl != null) {
            oWebControl.JS_HideWnd() // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
            oWebControl.JS_Disconnect().then(
                function() {
                    // 断开与插件服务连接成功
                },
                function() {
                    // 断开与插件服务连接失败
                }
            )
        }
    },
}
</script>
